{% extends 'feedback/base.html' %}
{% block title %}
    Редактирование наряда
{% endblock %}
{% block content %}
{% load ifinlist_dnone %}
{% load ifinlist_checked %}



<div class="row align-items-center row-cols-4 mt-2 mb-2">
        <div class="col text-center border border-1 border-secondary border-bottom-0 border-top-0">
            <h4>Наряд № {{ etap.nkv }}</h4>
        </div>
        <div class="col text-center">
            <h5>Врач: {{ etap.get_doctor_fio }}</h5>
        </div>
        {% comment %} <div class="col" hx-get="{% url 'naryad_list' %}" hx-swap="outerHTML" hx-push-url="true"  hx-indicator="#indicator"> {% endcomment %}
            <div class="col text-center border border-1 border-secondary border-bottom-0 border-top-0 border-end-0">
                <h5>Вы зашли как: {{ user.get_short_name }}</h5>
            </div>
        <div class="col text-center mb-2 border border-1 border-secondary border-bottom-0 border-top-0 border-end-0">
            <a href="{% url 'naryad_list' %}" class="p-3 align-items-center text-dark text-decoration-none w-30 boder border-pill">
                <img src="/static/img/back.png" alt="logo" width="30" height="30" class="mb-1" viewBox="0 0 118 94"></img>
            <span class="fs-4">Вернуться к нарядам</span>
            </a>
        </div>
        <div class="col text-center d-none">
            <a href="{% url 'naryad_list' %}" class="btn btn-primary"
            >Вернуться к нарядам
            </a>
        </div>
    </div>


<script>
    {% if messages %}
        {% for message in messages %}
            alert('{{message}}')
        {% endfor %}
    {% endif %}
</script>

<form enctype="multipart/form-data" id="information_form" method="post">
    {% csrf_token %}
    <div class="container-fluid text-left pt-3">

                <div class="row row-cols-4">
                    <div class="col-4">
                        <label class="form-label">Пациент: <b>{{ etap.patient.fam }} {{ etap.patient.im }} {% if etap.patient.ot %} {{ etap.patient.ot }} {% endif %}</b></label>
                    </div>
                    <div class="col-4">
                            <label >Дата рождения: <b>{{ etap.patient.dr|date:'d.m.Y' }}</b></label>
                    </div>
                </div>

                <div class="row row-cols-4">
                    <div class="col-4">
                        <label class="form-label">Дата наряда: <b>{{ etap.dou|date:'d M Y' }}</b></label>
                    </div>
                    <div class="col-4">
                        <label class="form-label">Оплата: <b>{{ etap.opl.name_opl }}</b></label>
                    </div>
                    <div class="col d-none">
                            <label >Номер IDKV: <b>{{ etap.idkv }}</b></label>
                    </div> 
                    <div class="col d-none">
                        <label class="form-label"><b>Номер NKV: {{ etap.nkv }}</b></label>
                    </div>    
                    <div class="col-4">
                        <label class="form-label">Стоимость: <b>{{etap.stu}} р.</b></label>
                    </div>
                </div>

                {% comment %} <div class="row row-cols-4">
                    <div class="col-4">
                        <label class="form-label">Врач: <b>{{ etap.get_doctor_fio }}</b></label>
                    </div>
                </div> {% endcomment %}

                {% comment %} <div class="row row-cols-2">
                    <div class="col d-none">
                        <label class="form-label">№ Этапа: <b>{{etap.id_etap}}</b></label>
                    </div>
                    <div class="col">
                        <label class="form-label">Оплата: <b>{{ etap.opl.name_opl }}</b></label>
                    </div>
                    <div class="col d-none">
                        <label class="form-label">Дата: <b>{{ etap.dou|date:'d M y' }}</b></label>
                    </div>
                </div>
                <hr> {% endcomment %}
                <div class="row align-items-center pt-2 pb-2">
                    <div class="col">
                        
                        {% comment %} <input id="files_field" type="file" name="images" 
                        accept="image/*" multiple/> {% endcomment %}
                            <input class="d-none" name="etap_id" value="{{ etap.id }}">

                            <div class="input-group mb-3">
                                <span class="input-group-text " id="basic-addon1">
                                    <img src="/static/img/upload.png" width="30" height="30" />
                                 </span>
                                <label for="image-load" class="input-group-text">Прикрепить файлы</label>
                            <input
                            class="form-control d-none"
                            id='image-load'
                            hx-target='#information_form'
                            hx-swap="outerHTML"
                            hx-select="#information_form"
                            hx-encoding='multipart/form-data'
                            type='file'
                            name='image' 
                            hx-post="{% url 'image_add' %}"
                            hx-trigger='change'
                            accept="image/*">
                            </div>
                            {% comment %} <button>
                                Upload
                            </button> {% endcomment %}
                            {% comment %} <progress id='progress' value='0' max='100'></progress> {% endcomment %}
                        {% comment %} <script>
                            htmx.on('#img-form', 'htmx:xhr:progress', function(evt) {
                              htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
                            });
                        </script> {% endcomment %}
                    </div>
                </div>

                <div class="row row-cols-2">
                    <div class="col-7">
                        <div id="image-block" class="row row-cols-6">
                            {% for image in etap.images.all %}
                                <div class="col pb-2 pt-2 ms-2 me-2 border border-1 rounded-1 text-center">
                                    <img
                                    hx-get="/naryad/image_fullscreen/{{image.id}}"
                                    hx-target="#place_for_modal"
                                    hx-select="#imageview_modal"
                                    hx-swap="innerHTML"
                                    hx-trigger="click"
                                    src="{{ image.img.url }}"
                                    style="width:100px;height:100px;"
                                    alt="">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    

                    <div class="col-5">
                        <label for="kom_etap" class="form-label">Комментарий:</label>
                        <br>
                        {% if etap.kom_etap|length > 0 %}
                        <textarea id="kom_etap" name="kom_etap" class="form-control" aria-label="Комментарий">{{etap.kom_etap}}</textarea>
                        {% else %}
                        <textarea id="kom_etap" name="kom_etap" class="form-control" aria-label="Комментарий"></textarea>
                        {% endif %}
                    </div>

                </div>

    </div>
    <div class="p-2 rounded-pill container-fluid text-left {{ dolzh|ifinlist_dnone:"tech_st,prog" }}" id="spec_select_cont">
        <div class="row g-2">
            <div id="select_spec_block" class="row row-cols-4 ">
                <div class="col text-center">
                    <label for="select_tech" class="form-label">Техник</label>
                    <br>
                    <select id="select_tech" name="select_tech" class="form-select">
                        <option value="0">Не выбран</option>
                        {% for tech in tech_list %}
                            <option value="{{ tech.user.mpp }}" {% if tech.user.mpp == etap.sdl_set.tech %} selected {% endif %}>{{ tech }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col text-center">
                    <label for="select_pol" class="form-label">Полировщик</label>
                    <br>
                    <select if="select_pol" name="select_pol" class="form-select">
                        <option value="0">Не выбран</option>
                        {% for pol in pol_list %}
                            <option value="{{ pol.user.mpp }}" {% if pol.user.mpp == etap.sdl_set.pol %} selected {% endif %}>{{ pol }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col text-center">
                    <label for="select_lit" class="form-label">Литейщик</label>
                    <br>
                    <select if="select_lit" name="select_lit" class="form-select">
                        <option value="0">Не выбран</option>
                        {% for lit in lit_list %}
                            <option value="{{ lit.user.mpp }}" {% if lit.user.mpp == etap.sdl_set.lit %} selected {% endif %}>{{ lit }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col text-center">
                    <label for="select_cadcam" class="form-label">CAD/CAM</label>
                    <br>
                    <select if="select_cadcam" name="select_cadcam" class="form-select">
                        <option value="0">Не выбран</option>
                        
                        {% for cadcam in cadcam_list %}
                            <option value="{{ cadcam.user.mpp }}" {% if cadcam.user.mpp == etap.sdl_set.cadcam %} selected {% endif %}>{{ cadcam }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end pt-2 ">

        {% comment %} <div class="col-8">
        </div> {% endcomment %}

        {% comment %} <div class="col ps-5 pe-5 {{ dolzh|ifinlist_dnone:"tech_st,prog" }}">
            <div class="form-check form-switch ">
                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" name="next_etap"
                _="on click
                if #update do not match .kk
                put 'В работу' into the next <button/> then add .kk to #update
                else
                put 'Сохранить' into the next <button/> then remove .kk from #update">
                <label class="form-check-label" for="flexSwitchCheckDefault">Передать на следующий этап</label>
            </div>
        </div> {% endcomment %}
        

        {% if etap.id_etap == 1 %}
 
            {% if etap.sdl_etap.sdl == 35 or etap.sdl_etap.sdl == 3500 %}
            <div >
                <button id="next_etap" type="button submit"
                name="btn_next" value="nextEtap" class="btn btn-primary me-2"
                >Сохранить и передать в работу</button>
            </div>
            {% endif %}
        {% elif etap.sdl_etap.sdl != 35 and etap.sdl_etap.sdl == 3500 %}

            <div >
                <button id="next_etap" type="button submit"
                name="btn_next" value="nextEtap" class="btn btn-primary me-2"
                >Сохранить и передать в работу</button>
            </div>
        {% else %}

        {% endif %}
        {% if etap.dz_etap != False %}
        <div >
            <button id="update" style="width:150px" type="button submit"
            name="btn" value="selectNew" class="btn btn-primary me-2"
            hx-post=""
            hx-swap="none"
            _="on click toggle @disabled until htmx:afterOnLoad
            then
            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Сохранено',
                showConfirmButton: false,
                timer: 1500
              })">Сохранить</button>
        </div>
        {% endif %}
        {% comment %} <div class="col" {{ dolzh|ifinlist_dnone:"doc,zav_ort,prog" }} >
            <button id="update" style="width:150px" type="button submit"
            name="btn" value="selectNew" class="btn btn-primary"
            hx-post="" hx-swap="none"
            _="on click toggle @disabled until htmx:afterOnLoad
            then
            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Сохранено',
                showConfirmButton: false,
                timer: 1500
              })">Закрыть этап</button>
        </div> {% endcomment %}
        {% if etap.id_etap > 1 %}
        <div class="me-2 {{ dolzh|ifinlist_dnone:"doc,zav_ort,prog" }}"  >
            <a href="{% url 'finish_naryad' etap.id %}" id="update" style="width:150px" type="button submit"
            name="btn" value="selectNew" class="btn btn-primary"
            >Закрыть наряд</a>
        </div>
        {% endif %}
    </div>
    <div class="container d-none">
        <div class="row row-cols-1">
            <div class="col d-none">
                <div class="form-check form-switch {{ dolzh|ifinlist_dnone:"tech_st,prog" }}">
                    <input class="form-check-input " type="checkbox" role="switch" id="flexSwitchCheckDefault" {{ dolzh|ifinlist_checked:"tech_st,prog" }}
                        _="on click toggle .d-none on #spec_select_cont">
                    <label class="form-check-label" for="flexSwitchCheckDefault">Изменить специалистов в наряде</label>
                </div>
            </div>
            <div class="col d-none">
                <div class="form-check form-switch {{ dolzh|ifinlist_dnone:"tech_st,prog" }}">
                    <input class="form-check-input " type="checkbox" role="switch" id="prevEtapSwitchCheck" name="prevEtapSwitchCheck"
                        >
                    <label class="form-check-label" for="prevEtapSwitchCheck">Изменить специалистов в предыдущих этапах наряда</label>
                </div>
            </div>
        </div>
    </div>


</form>
<div class="container-fluid text-left">
    <table class="table table-sm">
        <thead>
            <tr>
                <th scope="col" style="width:15%" class="text-center">Этап</th>
                <th scope="col" style="width:28%" class="text-center">Специалист</th>
                <th scope="col" style="width:15%" class="text-center">Дата</th>
                <th scope="col" style="width:15%" class="text-center">Снимки</th>
                <th scope="col" style="width:28%" class="text-center">Комментарий</th>
            </tr>
        </thead>
    </table>
{% for naryad in previous_etap %}
    {% comment %} {% if naryad.images.all or naryad.kom_etap|length > 0 %} {% endcomment %}
    {% if naryad.images.all %}
        <details>
            <summary>
    <table class="table table-success table-sm table-hover">
    {% else %}
    <table class="table table-sm table-hover">
    {% endif %}
        
        <tbody>
            <tr>
                <td style="width:15%" class="text-center">{{ naryad.id_etap }}</td>
                <td style="width:28%" class="text-center">{{ naryad.sdl_etap.name_sdl }}</td>
                <td style="width:15%" class="text-center">{{ naryad.dz_etap|date:"d.m.Y" }}</td>
                <td style="width:15%" class="text-center">
                    {% if naryad.images.all %}
                        {{ naryad.images.all|length }}
                    {% else %}
                        Нет
                    {% endif %}
                </td>
                <td style="width:28%" class="text-center">
                    {% if naryad.kom_etap %}
                        {{ naryad.kom_etap }}
                    {% else %}
                        ------------
                    {% endif %}
                </td>
            </tr>
        </tbody>
    </table>
    {% if naryad.images.all%}
        </summary>
    {% endif %}
    {% for photo in naryad.images.all %}
        <img
        hx-get="{% url 'image_fullscreen' photo.id %}"
        hx-target="#place_for_modal"
        hx-select="#imageview_modal"
        hx-swap="innerHTML"
        hx-trigger="click"
        src="{{ photo.img.url }}"
        style="width:100px;height:100px;"
        alt=""
        >
    {% endfor %}
    {% if naryad.images.all%}
    </details>
    {% endif %}

{% endfor %}

</div>
<div id="place_for_modal">
</div>
{% comment %} <div
  class="modal fade show htmx-indicator"
  id="indicator"
  tabindex="-1"
  aria-labelledby="exampleModalFullscreenLabel"
  style="display:block;position:absolute;top: 45%;left: 45%;"
  aria-modal="true"
  role="dialog"
>
    <img  class="htmx-indicator" src="/static/img/svg-loaders/grid.svg">
</div> {% endcomment %}
{% endblock %}